import { Line } from '@ant-design/plots';
import { LineChartOutlined, CloseCircleOutlined } from '@ant-design/icons';
import { useState, useEffect } from 'react';
import { Button, Col, Row, Card, Table, } from 'antd';
import { Inventory } from '@/api/SampleClothing'
import { format } from 'fecha';
import Demo  from "./ViewsComponent"
import Test  from "./ViewsTest"

const DemoLine = () => {
  const [activeTabKey2, setActiveTabKey2] = useState<string>('Input');
  const [text, setText] = useState('入库')
  const [ propsdata,setPropsdata ] = useState([{count_num: 0, input_id: 0, name: "", person:"",price:0,price_sum:0,total_input:0, total_output:0}])
  const [data, setData] = useState([
    {
      "date": "2007-04-23",
      "count": 93.24
    }])
  // 获取Views数据

  const [viewsdata,setViewsdata] = useState([{'input_id':1,"count":0}])
  const GetData = async (options) => {
    try {
      const data01 = await Inventory(options)
      // console.log("views222t", data01)
      if( data01.data.length !== 0){
        setData(data01.data)
      }
      
    } catch (err) {
      console.log(err)
    }
  }
  const onTab2Change =async  (key: string) => {
    
    if (key === 'Input') {
      GetData({ 'logo': key })
      setText('入库')
    } else if (key === 'Output') {
      GetData({ 'logo': key })
      setText("出库")
    } else if (key === 'Views') {
      // console.log('执行了')
      try {
        // console.log('执行了')2
        const data01 = await Inventory({'logo': key})
        // console.log("views", data01)
        setData([
          {
            "date": "2007-04-23",
            "count": 999999.99
          }])
        setViewsdata(data01.data)
      } catch (err) {
        console.log(err)
      }
      setText("库存异常")
    }
    setActiveTabKey2(key);
  };
  const input_config = {
    data,
    locale: 'zh-CN',
    xField: (d) => new Date(d.date),
    yField: 'count',
    axis: {
      x: { title: '入库日期', size: 40, titleSpacing: 10, titleFontSize: 12, titleFontWeight: 600, grid: true, gridStrokeOpacity: 0.5 },
      y: { title: '入库数量', size: 36, titleSpacing: 30, titleFontSize: 12, titleFontWeight: 600, grid: true, gridStrokeOpacity: 0.5 }
    },
    slider: {
      x: { labelFormatter: (d) => format(d, 'YYYY/MM/DD') },
      start: new Date(2024, 5, 1).getTime(), // 设置缩略轴的起始值为2024年6月1日
      end: new Date(2024, 11, 31).getTime(),
      y: { labelFormatter: '~s' },
    },
    title: '入库折线图',
    tooltip: {
      title: (d) => ('入库时间：' + d.date),
    }
  };
  const output_config = {
    data,
    locale: 'zh-CN',
    xField: (d) => new Date(d.date),
    yField: 'count',
    axis: {
      x: { title: '出库日期', size: 40, titleSpacing: 10, titleFontSize: 12, titleFontWeight: 600, grid: true, gridStrokeOpacity: 0.5 },
      y: { title: '出库数量', size: 36, titleSpacing: 30, titleFontSize: 12, titleFontWeight: 600, grid: true, gridStrokeOpacity: 0.5 }
    },
    slider: {
      x: { labelFormatter: (d) => format(d, 'YYYY/MM/DD') },
      start: new Date(2024, 5, 1).getTime(), // 设置缩略轴的起始值为2024年6月1日
      end: new Date(2024, 11, 31).getTime(),
      y: { labelFormatter: '~s' },
    },
    title: '出库折线图',
    tooltip: {
      title: (d) => ('出库时间：' + d.date),
    }
  };
  
  const contentListNoTitle= {
    Input: <Line {...input_config} />,
    Output: <Line {...output_config} />,
    Views: <Test Props={viewsdata} />,
  };
  const tabListNoTitle = [
    {
      key: 'Input',
      label: '入库视图',
      icon: <LineChartOutlined />
    },
    {
      key: 'Output',
      label: '出库视图',
      icon: <LineChartOutlined />
    },
    {
      key: 'Views',
      label: '库存视图',
      icon: <CloseCircleOutlined />
    },
  ];
  const columns = [
    // {
    //   dataIndex: 'index',
    //   valueType: 'index',
    // },
    {
      title: '时间',
      dataIndex: 'date',
      // valueType: 'date',
      key: 'age',
    },
    {
      title: '数量',
      dataIndex: 'count',
      // valueType: '',
      key: 'address',
    },
  ];

  // 更新 即实 库存数据
  const UpdateData = async ()=>{
    // console.log('click')
    const data01 = await Inventory({'logo':'Views_Data'})
    if(data01.status === 200 && data01.data.length !== 0){

      setPropsdata(data01.data)
    }
    // console.log(data01)
    // GetData()
  }
  // 组件初始化 时候运行
  useEffect(() => {
    
    UpdateData()
    // console.log(permissions.includes('delete_inputtable'))
    GetData({ 'logo': 'Input' })
  }, []); // 空数组作为第二个参数，表示只在组件加载时运行一次
  return (
    <>
      <Button type="primary" onClick={ UpdateData}>
        <span style={{fontWeight: 600}} >样衣视图中心</span>
      </Button>
      <Card
        style={{ width: '100%' }}
        tabList={tabListNoTitle}
        activeTabKey={activeTabKey2}
        onTabChange={onTab2Change}
        tabProps={{
          size: 'middle',
        }}
      >
        <Row>
          <Col span={19} >
            <div style={{ height: '300px', width: '96%' }}>{contentListNoTitle[activeTabKey2]}</div>
          </Col>
          <Col span={5} >
            <h3 style={{ color: 'red' }}>近期{text}情况</h3>
            <Table dataSource={data.slice(-6).reverse()} columns={columns} showHeader={false} pagination={false} size="small" />
          </Col>
        </Row>

      </Card>
      <Button type="primary" >
        <span style={{fontWeight: 600}} >即时库存数据</span>
      </Button>
      <Demo Props={propsdata}></Demo>
    </>
  )
};

export default DemoLine;